<template>
    <div class="snow-page">
        <div class="snow-inner-page">
            <a-form :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
                ref="formRef">
                <a-row :gutter="24">
                    <a-col :span="4">
                        <a-form-item field="scene_id" label="企业">
                            <a-select v-model="formData.form.scene_id" placeholder="请选择" allow-clear>
                                <a-option v-for="(item, index) in treeData" :key="index" :value="item.id">{{ item.name
                                    }}</a-option>
                            </a-select>
                        </a-form-item>

                    </a-col>
                    <a-col :span="6">
                        <a-form-item field="iot_trigger_alarm_level" label="报警级别">
                            <a-select v-model="formData.form.iot_trigger_alarm_level" placeholder="请选择" allow-clear>
                                <a-option value="39">严重</a-option>
                                <a-option value="40">紧急</a-option>
                                <a-option value="41">一般</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="7">
                        <a-form-item label="时间">
                            <a-range-picker v-model="timeRange" show-time :time-picker-props="{
                                defaultValue: ['00:00:00', '00:00:00']
                            }" :shortcuts="[
                                {
                                    label: '7天',
                                    value: () => [dayjs(), dayjs().add(1, 'week')],
                                },
                                {
                                    label: '一个月',
                                    value: () => [dayjs(), dayjs().add(1, 'month')],
                                },
                                {
                                    label: '1年',
                                    value: () => [dayjs(), dayjs().add(1, 'year')],
                                },
                            ]" @change="onChange"></a-range-picker>
                        </a-form-item>
                    </a-col>

                    <a-col :span="4">
                        <a-space>
                            <a-button type="primary" @click="onSearch">
                                <template #icon>
                                    <icon-search />
                                </template>
                                <template #default>查询</template>
                            </a-button>
                            <a-button @click="onReset">
                                <template #icon>
                                    <icon-refresh />
                                </template>
                                <template #default>重置</template>
                            </a-button>
                            <a-button @click="onupRead">
                                <template #icon>
                                    <icon-refresh />
                                </template>
                                <template #default>全部标记为已读</template>
                            </a-button>
                        </a-space>
                    </a-col>
                </a-row>
            </a-form>
            <a-table :data="tableData" row-key="id" size="small" bordered :pagination="false">
                <template #columns>
                    <a-table-column title="报警名称" :width="120">
                        <template #cell="{ record }">
                            {{ record.name }}
                        </template>
                    </a-table-column>
                    <a-table-column title="报警详情">
                        <template #cell="{ record }">
                            {{ record.description }}
                        </template>
                    </a-table-column>
                    <a-table-column title="报警联系人" :width="120">
                        <template #cell="{ record }">
                            {{ record.contact_names }}
                        </template>
                    </a-table-column>
                    <a-table-column title="报警级别" :width="120">
                        <template #cell="{ record }">
                            <span v-if="record.iot_trigger_alarm_level == 39">严重</span>
                            <span v-else-if="record.iot_trigger_alarm_level == 40">紧急</span>
                            <span v-else-if="record.iot_trigger_alarm_level == 41">一般</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="处理标志" :width="120">
                        <template #cell="{ record }">
                            <a-tag color="arcoblue" v-if="record.iot_alarm_process_status == 47">已处理</a-tag>
                            <a-tag color="red" v-else>未处理</a-tag>

                        </template>
                    </a-table-column>
                    <a-table-column title="时间" :width="180">
                        <template #cell="{ record }">
                            {{ record.atimestr }}
                        </template>
                    </a-table-column>

                    <a-table-column title="操作" align="center">
                        <template #cell="{ record }">
                            <a-space>
                                <a-button size="mini" type="primary" @click="handleUpdate(record)">处理</a-button>
                                <a-button size="mini" type="primary" @click="handleUpdate2(record)">标记</a-button>
                                <a-button size="mini" type="primary" status="danger"
                                    @click="onDelete2(record)">删除</a-button>
                            </a-space>
                        </template>
                    </a-table-column>
                </template>
            </a-table>
            <a-pagination :total="total" style="margin-top:10px;" @change="changePage" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Modal, Message } from "@arco-design/web-vue";
import { getAllqiyeAPI } from "@/api/modules/qiye/index";
import { getalarmAPI, deletealarmAPI, updatealarmAPI,updatAllreadealarmAPI } from "@/api/modules/alarm/index";

import { onMounted } from "vue";
import dayjs from 'dayjs';

onMounted(() => {
    getQiyeList();
    init();
});



const treeData = ref([])
function getQiyeList() {
    let obj = {}
    getAllqiyeAPI(obj).then(res => {
        treeData.value = (res.data);
    })
}


function onChange(dateString) {
    console.log('onChange: ', dateString);
    formData.form.start_time = dateString[0]
    formData.form.end_time = dateString[1]
}

async function init() {
    formData.form.scene_id = formData.form.scene_id + ''
    let res = await getalarmAPI(formData.paged, formData.form);
    total.value = 0
    tableData.value = [];
    if (res.status == 2) {
        total.value = res.data.totalCount;
        tableData.value = res.data.data;
    } 
}

const total = ref(0)

const tableData = ref([]);

const today = dayjs();
const last7Days = [];

for (let i = 0; i < 8; i++) {
    const date = today.subtract(i, 'day').format('YYYY-MM-DD HH:mm:ss');
    last7Days.push(date);
}

const timeRange = ref([last7Days[last7Days.length - 1], last7Days[0]])



const formData = reactive({
    form: {
        end_time: last7Days[0],
        iot_trigger_alarm_level: "",
        scene_id: "",
        iot_alarm_process_status: 46,
        start_time: last7Days[last7Days.length - 1]
    },
    paged: 1
});

const formRef = ref();
const onReset = () => {
    formRef.value.resetFields();
    init();
};

async function handleUpdate(row) {
    let obj = {
        id: row.id,
        iot_alarm_process_status: 47
    }
    let res = (await updatealarmAPI(obj)) as any;
    if (res.status == 2) {
        Message.success("处理成功");
    } else {
        Message.error(res.statusMsg);
    }
    init();
}

async function onupRead() {
    Modal.warning({
        title: "提示",
        content: "是否确定设置所有报警信息为已处理？",
        hideCancel: false,
        closable: true,
        onOk: async () => {
            try {
                let res = (await updatAllreadealarmAPI()) as any;
                if (res.status == 2) {
                    Message.success("已读成功");
                } else {
                    Message.error(res.statusMsg);
                }
                init();
            } catch { }
        }
    });
}

async function handleUpdate2(row) {
    let obj = {
        id: row.id,
        iot_alarm_process_status: 48
    }
    Modal.warning({
        title: "提示",
        content: "确定标记次信息？",
        hideCancel: false,
        closable: true,
        onOk: async () => {
            try {
                let res = (await updatealarmAPI(obj)) as any;
                if (res.status == 2) {
                    Message.success("标记成功");
                } else {
                    Message.error(res.statusMsg);
                }
                init();
            } catch { }
        }
    });
}

function changePage(page) {
    formData.paged = page;
    init()
}

 function onSearch() {
    init();
}



const onDelete2 = (row: any) => {
    Modal.warning({
        title: "提示",
        content: "确定删除？",
        hideCancel: false,
        closable: true,
        onOk: async () => {
            try {
                let res = (await deletealarmAPI(row.id)) as any;
                if (res.status == 2) {
                    Message.success("删除成功");
                } else {
                    Message.error(res.statusMsg);
                }
                init();
            } catch { }
        }
    });
};
</script>

<style lang="scss">
.arco-modal-body {
    text-align: center !important;
}

::v-deep .arco-table-size-small .arco-table-thead .arco-table-cell {
    padding: 2px 16px !important;
    text-align: center !important;
}
</style>